<template>
    <div>
        <div class="x-content">
            <!-- 标题部分 -->
            <div class="x-content-top padding25 x-bottom-border">
                <text class="x-flex1 x-title">老裁缝家纺</text>
            </div> 
            <!-- 商品部分 -->
            <div class="x-order-detail">
                <div class="x-content-center padding25 x-bottom-border" 
                     v-for="(shop,i) in orderData.skus" 
                     :key="i" >
                    <image class="x-image" :src="img"></image>
                    <div class="x-shop-div">
                        <div class="x-shop-start">
                            <text class="x-shop-title">{{shop.sku_name}}</text>
                            <text class="x-shop-explain">{{getExplain(shop.sku_specs)}}</text>
                        </div>
                        <div class="x-shop-last">
                            <text class="x-shop-price padding-bottom5">¥{{shop.sku_price}}</text>
                            <text class="x-shop-num">×{{shop.number}}</text>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 运费实付款 -->
            <div class="x-content-bottom padding25 padding-top25">
                <text class="x-flex1 x-shop-ntext">运费</text>
                <text class="x-shop-yprice">¥10</text>
            </div> 
            <div class="x-content-bottom padding25 padding-top25 padding-bottom25">
                <text class="x-flex1 x-shop-ntext">实付款(含运费)</text>
                <text class="x-shop-price">¥{{(orderData.coin).toFixed(2)}}</text>
            </div> 
        </div>
    </div>
</template>
<script>
export default {
    props: {
      orderData: {
        type: Array,
        default: {}
      },
      showDetail:{
          type:Boolean,
          default:false
      },
      img:{
          type:String,
          default:""
      }
    },
    data(){
        return {
        }
    },
    methods:{
        /**获取订单规格 */
        getExplain(data){
            if(!data) return;
            var explain = "";
            for(var i in data){
                explain += data[i]['name'] + ":" + data[i]['value'] + " ";
            }
            return explain;
        }
    }
}
</script>
<style scoped>
.iconfont{
    font-family: iconfont;
}
.x-flex1{
    flex: 1;
}
.x-content {
    background-color: #fff;
}
.padding25{
    padding-left: 25px;
    padding-right: 25px;
}
.padding-top25 {
    padding-top:25px;
}
.padding-bottom25 {
    padding-bottom:25px;
}
.x-bottom-border {
    border-bottom-color: #dfdfdf;
    border-bottom-width: 1px;
}
.padding-bottom5 {
    padding-bottom: 5px;
}
.x-content-top {
    height:95px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.x-content-center {
    flex-direction: row;
    padding-top:20px;
    padding-bottom: 20px;
}
.x-title {
    color: #151517;
    font-size:32px;
}
.x-image {
    height: 150px;
    width: 150px;
}
.x-shop-div {
    flex: 1;
    position: relative;
    height: 150px;
}
.x-shop-start {
    padding-left: 15px;
}
.x-shop-last {
    flex: 1;
    position: absolute;
    bottom: 0px;
    padding-left: 15px;
    flex-direction: row;
}
.x-shop-title {
    color: #151517;
    font-size:30px;
}
.x-shop-explain {
    color: #696969;
    font-size:24px;
    padding-top:5px;
}
.x-shop-price {
    color: #af0a28;
    font-size: 32px;
}
.x-shop-yprice {
    color: #212025;
    font-size: 32px;
}
.x-shop-num {
    padding-left:50px;
    color: #68686a;
    font-size:26px;
    padding-top:5px;
}
.x-content-bottom {
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.x-shop-ntext { 
    color: #222126;
    font-size:28px;
}
.x-order-detail:active {
    background-color: #eee;
}
</style>

